<template>
  <!-- /////////////////////////////////////////////////////王宇////////////////////////////////////////////////////// -->
  <el-container>
    <el-header class="header">
      <heads>会员列表</heads>
    </el-header>
    <el-main class="mainBox">
      <div class="bgc">
        <div class="searchBox">
          <el-input
            class="inputStyle"
            v-model="input1"
            placeholder="用户ID或者账号"
            clearable
            @change="selectOne"
          />
          <el-input
            class="inputStyle"
            v-model="input2"
            placeholder="用户昵称"
            clearable
            @change="selectTWO"
          />
          <el-date-picker
            class="inputStyle"
            v-model="value1"
            type="datetime"
            placeholder="请选择注册时间"
            @change="selectDate"
          />
          <el-button class="btnStyle" type="primary">查询</el-button>
          <el-button class="btnStyle">导出</el-button>
        </div>
        <div class="tableBox">
          <el-table
            ref="multipleTableRef"
            :data="state.tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="姓名" width="150">
              <!-- <template #default="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column property="phone" label="电话" width="150" />
            <el-table-column
              property="idCard"
              label="会员卡"
              show-overflow-tooltip
            />
            <el-table-column property="name" label="会员等级" width="150" />
            <el-table-column property="name" label="教练" width="120" />
            <el-table-column property="name" label="用户状态" width="120" />
            <el-table-column label="操作">
              <template #default="scope">
                <!-- <el-button
                  text
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >Edit</el-button
                >
                <el-button
                  text
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >Delete</el-button
                > -->
                <el-link
                  type="primary"
                  style="margin-right: 10px"
                  @click="Toview"
                  >查看</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right: 10px"
                  @click="editor"
                  >编辑</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right: 10px"
                  @click="deleteBtn"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageBox">
          <el-pagination layout="prev, pager, next" :total="100" />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { getAllList } from "../../http/api";
import heads from "./HeaderView.vue";
import { ElTable } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import router from "../../router";
import { ElMessage, ElMessageBox } from "element-plus";

interface User {
  date: string;
  name: string;
  address: string;
}
var input1: any = ref("");
var input2: any = ref("");
var value1: any = ref("");
const selectOne = function () {
  console.log(input1);
};
const selectTWO = function () {
  console.log(input2);
};
const selectDate = function () {
  console.log(value1);
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
//操作

const Toview = (index: number, row: User) => {
  console.log(index, row);
  router.push("/mainView/ListMembers/toView");
};
const editor = (index: number, row: User) => {
  router.push("/mainView/ListMembers/EditingMaterials");
};
const deleteBtn = (index: number, row: User) => {
  ElMessageBox.confirm("确定要删除此行信息？删除后无法找回?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已经取消",
      });
    });
};
var state = reactive({ tableData: [] });
// const tableData: User[] = [
//   {
//     date: "2016-05-03",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom1",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom2",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom3",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-08",
//     name: "Tom4",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-06",
//     name: "Tom5",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-07",
//     name: "Tom6",
//     address: "No. 189, Grove St, Los Angeles",
//   },
// ];

//getAllList
onMounted(() => {
  getAllListFn();
});

const getAllListFn = function () {
  getAllList().then((res) => {
    console.log(res.data);

    state.tableData = res.data;
  });
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  padding: 0;
  margin-top: 20px;
}
.mainBox {
  width: 100%;
  padding: 50px 20px;
  background-color: #f2f2f2;
}
.bgc {
  background-color: #fff;
}
.searchBox {
  width: 100%;
  display: flex;
  padding: 20px 10px;
}
.inputStyle {
  width: 15%;
  margin-right: 10px;
}
.btnStyle {
  margin-left: 10px;
}
.tableBox {
  width: 100%;
}
.table {
  margin-top: 20px;
}
.pageBox {
  width: 100%;
  display: flex;
  padding-top: 20px;
  justify-content: flex-end;
}
</style>
